import type { Ref, VNode, StyleValue } from "vue";
import { VueDraggable } from 'vue-draggable-plus'
import { ElDialog, ElTable, ElTableColumn, TableColumnCtx, ElCascader, ElDatePicker, ElImage, ElTag
    , FormItemProps, InputProps, InputNumberProps, ISelectProps, CascaderProps, DatePickerProps, ImageProps
 } from "element-plus";
export * from './page'

// 移除字段的只读属性
type Mutable<T> = {
    -readonly [P in keyof T]: T[P]
}

// 获取VueDraggable组件的props入参的类型
export interface VueDraggableProps extends  Partial< InstanceType<typeof VueDraggable>['$props'] > {
    // 对VueDraggable的onUpdate进行扩展， 新增参数newList新的list数据
    onUpdateList: (newList: any[], event: any) => void
}

// 获取ElDialog组件的props入参的类型
export type ElDialogProps =  Mutable<InstanceType<typeof ElDialog>['$props']>


// 获取ElDatePicker日期选择器组件的props入参的类型
export type ElDatePickerPropsType = InstanceType<typeof ElDatePicker>['$props']['type']
export const dateTypes = ['year' , 'years' , 'month' , 'months' , 'date' , 'dates' , 'week' , 'datetime']
export const dateRangeTypes = ['yearrange', 'monthrange', 'daterange' , 'datetimerange' ]
// ElDatePicker日期选择器 Shortcuts 参数
export type ShortcutType = 'currentWeek' | 'currentMonth' | 'currentYear' | 'lastDay_7' | 'lastDay_30' | 'lastDay_60' | 'lastDay_90'
export interface ShortcutsItem {
  type: ShortcutType    // 类型：自定义字段
  text: string          // 展示内容
  value: ()=> Date[]    // 获取时间
}


// type FilterItemType = ElFormItemProps & ElInputProps & ElInputNumberProps & ElSelectProps & ElCascaderProps & Omit<ElDatePickerProps, "type">
type FilterItemType = Mutable<Partial<FormItemProps>> &  Mutable<Partial<InputProps>> &  Mutable<Partial<InputNumberProps>> &  Mutable<Partial<ISelectProps>>  
& Mutable<Partial<CascaderProps>> & Mutable<Omit<Partial<DatePickerProps>, "type">> 
// ProTable 搜索
export interface FilterItem extends FilterItemType {
    // 类型 element-plus 【select 选择器， cascader 级联选择器， ['date' | 'daterange' | 'datetime' | 'datetimerange'] 日期选择器 】
    type?: 'input-number' | 'select' | 'cascader' | ElDatePickerPropsType
    // 字段名 必填
    prop: string | string[]
    // 初始默认值
    value?: ShortcutType| any,
    // 当type = daterange | datetimerange 日期范围选择器， 根据ShortcutType初始化value默认值
    defaultShortcut?: ShortcutType
    // 当type = select | cascader 选择器时 下拉框的选项
    list?: SelectItem[]
    // 搜索条件插槽名称
    slot?: string
}





// 获取ElTag组件的props入参的类型
export type ElTagProps = InstanceType<typeof ElTag>['$props']
type tagTypes = 'primary' | 'success' | 'info' | 'warning' | 'danger'
// tag映射器 key:值 val:使用什么类型tag展示
export type TagMapType = {
    [key:string]: tagTypes, // 该值对应的tag类型
    [key:number]: tagTypes, // 该值对应的tag类型
    true?: tagTypes         // 值为false的tag类型
    false?: tagTypes        // 值为false的tag类型
    defalut?: tagTypes      // 默认tag类型
}

// 下拉框选项类型 枚举值
export type SelectItem = {
    value?: any  // 数据值
    label?: any  // 展示内容
    // 扩展
    [key:string]: any
}

// 获取字段值函数
export type getFieldValueFn = (row: any) => any

/**
 * 获取字段值
 * @param row 寒行数据
 * @param fieldSource 
 */
export const getFieldValue = (row: any, fieldSource: string | getFieldValueFn) => {
    if (fieldSource) {
        if(typeof fieldSource === 'string') {
            return row[fieldSource]
        } else if(typeof fieldSource === 'function') {
            return fieldSource(row)
        }
    }
}


// 获取ElTableColumn组件的props入参的类型
export type ElTableColumnProps = InstanceType<typeof ElTableColumn>['$props']
// ElTableColumn.type原生类型
export const ElTableColumnTypes: string[] = ['index', 'selection', 'expand']

// TableColumn组件props继承ElTableColumnProps对其进行扩展
type TableColumnItemType = any & ElTableColumnProps & Omit<ElTagProps, "type"> & Mutable<Partial<ImageProps>>
export interface TableColumnItem extends TableColumnItemType {
    // 对应列的类型 来源 ElTableColumn.type， 可在 element-plus 基础上进行扩展， 在table-column 中判断type
    // element-plus【index 展示当行索引， selection 展示多选框 ， expand 展开按钮】, drag 拖拽按钮，image el-image图片预览
    type?: 'index' | 'selection' | 'expand' | 'drag' | 'image'
    // 数据来源 来源 ElTableColumn.prop 字段名， 在原基础上继续扩展 获取字段值函数
    prop?: string | getFieldValueFn
    // 是否展示该字段
    visible?: boolean
    // 对齐方式 来源 ElTableColumn.align
    align?: 'left' | 'center' | 'right'
    // 固定左侧右侧
    fixed?: 'left' | 'right' | true | false
    // 单元格渲染函数 来源 ElTableColumn.formatter , 返回VNode
    render?: (row: any, column: TableColumnCtx<any>, cellValue: any, index: number) => VNode | any
    // 表头渲染函数 来源 ElTableColumn.renderHeader , 返回VNode
    renderHeader?: (data: { column: TableColumnCtx<any>, $index: number }) => VNode | any
    // 单元格插槽名称
    slot?: string
    // 表头插槽名称
    slotHeader?: string
    // 日期格式化
    format?: 'YY' | 'YY-MM' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'HH' | 'HH:mm' | 'HH:mm:ss'
    // 枚举值转换
    list?: SelectItem[]
    // 使用element-plus tag 对应原值进行展示
    tagType?: TagMapType
    // 当type=image图片类型时 图片预览链接list的 字段名 | 获取方法 ， 对应 ElImage.preview-src-list
    srcList?: string | getFieldValueFn
    // 点击
    clickProps?: {
        // 是否可点击 默认是
        clickable?: (row) => boolean
        // 点击事件 row:行数据 event:点击Dom event
        onclick: (row, event) => any
        // 可点击时候的样式
        style?: StyleValue
    }
    // 子集用于多级表头树形结构
    children?: TableColumnItem[]
    // 扩展
    // [key:string]: any
}


// 获取ElTable组件的props入参的类型
export type ElTableProps = InstanceType<typeof ElTable>['$props']
// Table组件props继承ElTableProps对其进行扩展
export interface TableProps extends /* @vue-ignore */ ElTableProps {
    // 列表字段
    columns?: TableColumnItem[]
    // 是否开启列表字段设置工具
    tableCustom?: boolean
    // 列表数据
    data?: any[]
    // vue-draggable-plus 组件参数与配置
    drag?: VueDraggableProps
}



